<template>
	<view class="">
		<view class="content">
			<search></search>
				<view class="box"  v-for="item in courses" :key="item.id">
					<image :src="item.cover" mode="aspectFill"  @click="goToCoureseDetail(item.id)"></image>
					<view class="overlay">
						<view class="watch">
							<uni-icons type="videocam" color="white" size="20" >
								<text style="font-size: 14px;">{{item.viewCount}}</text>
							</uni-icons>
						</view>
						<view class="lessons">
							<text>共{{item.lessonNum}}课时</text>
						</view>
					</view>
					<view class="msg">
						<text>{{item.title}}</text>
						<uni-icons type="locked-filled" size="15"  color="red" v-if="item.price!=0">{{item.price}}￥</uni-icons>
						<text v-else style="color: red;">免费观看</text>
					</view>
				</view>
		</view>
	</view>
</template>

<script setup>
	import {getPurchasedCourseList} from "@/apis/purchasedCourse.js"

	
	const buyCourseIds=uni.getStorageSync("BuyCourses")

	
	const courses=ref([])
	const courseVo=ref({
		currentPage:1,
		pageSize:12,
		courseIds:buyCourseIds
	})
	const getCourseInfo=async()=>{
		console.log("==============buyCourseIds======================");
		console.log(buyCourseIds);
		if(buyCourseIds.length==0){
			uni.showToast({
					title:"您还没有购买任何课程",
					icon:"none"
				})
			return;
		}
		let res=await getPurchasedCourseList(courseVo.value)
		
		courses.value=res.data.data.records
		console.log("===================成功获取课程====================");
		console.log(courses.value);
	}
	
	getCourseInfo()
	
	const goToCoureseDetail=(id)=>{
		uni.navigateTo({
			url:"/pages/course/course?id="+id
		})
	}
	
	
	
	
</script>

<style lang="scss" scoped>
.content{
		width: 1000rpx;
	
		//margin-top:10rpx;
		
			.box{
				width: 360rpx;
				height: 350rpx;
				display:inline-block;
				margin-right:15rpx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				
				}
				.overlay {
				  width: 100%;
				  position: absolute;
				  bottom: 10rpx; 
				  background-color: rgba(0, 0, 0, 0.5); 
				  padding: 5rpx 10rpx;
				  border-radius: 5rpx;
				  color: white;
				  display: flex;
				  align-items: center;
				 .watch{
				  	  display: flex;
				  	  align-items: center;
					  
				  } 
				  .lessons {
				    margin-left: 100rpx; 
				  }
				}
				
				.msg{
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
		
				}
				
				
			}
		
	}
</style>
